<template>
  <div>
    <!-- 创建导航栏，左侧有一个按钮用于触发侧边导航栏的显示 -->
    <van-nav-bar @click-left="back()" fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
      <template #title>
        {{ titlename }}
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="add" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-action-sheet v-model="show" :actions="actions2" @select="onSelect2" />
    <!-- 内容区域 -->
    <!-- <form action="/">
      <van-search
        v-model="value"
        placeholder="搜索班级"
        input-align="center"
        shape="round"
        style="margin-top: 48px;"
        @search="onSearch1()"
      />
    </form> -->
  </div>
</template>
  
  <script>
import axios from 'axios';
// import { EventBus } from '../../eventbus';
export default {
  data() {
    return {
      value: "",
      titlename: "坚毅不倒！！！",
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "班级导入", value: "memberImport" },
        { text: "课程管理", value: "memberManage" },
        { text: "删除课程", value: "deleteCourse" },
      ],
      show: false,
      actions2: [
        { name: "选择导入", value: "selectImport" },
        // { name: "文件导入", value: "fileImport" },
      ],
    };
  },
  methods: {
    onSearch1() {
      console.log(this.value);
    },
    ToCreateCourse() {
      this.$router.push("/CreateCourse");
    },
    back() {
  this.$router.go(-1);
},
    // onSelect(action) {
    //   this.show = true;
    // },
    onSelect(action) {
      if (action.value === "memberImport") {
        this.show = true;
      }
      if (action.value === "memberManage") {
        this.$router.push( this.$route.params.id+ "/UpdateCourse/");
      }
      if (action.value === "deleteCourse") {
        this.$dialog
          .confirm({
             title: "提示",
             message: "确定删除该课程吗？(删除后将无法恢复)",
           })
          .then(() => {
             console.log("confirm");
            axios.post("/course/deleteCourse?CourseId=" + this.$route.params.id)
            .then((response) => {
               console.log(response);
               this.$message.success("删除成功");
               this.$router.push("/Course");})
           })
          .catch(() => {
             console.log("cancel");
           });
      }
    },
    onSelect2(action) {
      if (action.value === "selectImport") {
        this.$router.push("/SelectImportClass/" + this.$route.params.id);
      }
      if (action.value === "fileImport") {
        const input = document.createElement("input");
        input.type = "file";
        input.click();

        input.addEventListener("change", function () {
          // 处理选择文件后的逻辑
          const selectedFile = input.files[0];
          console.log(selectedFile);
        });
      }
    },
    updateTitle(newTitle) {
      this.titlename = newTitle;
      this.$forceUpdate();
    },
  },
  mounted() {
    // EventBus.$once("titleName", (titlename) => {
    //   this.updateTitle(titlename);
    //   // this.titlename = titlename;
    //   console.log(this.titlename);
    // });
    this.updateTitle(this.$route.params.titlename);
    console.log(this.$route.params.titlename);
  },
};
</script>
  
  
  <style scoped>
  .blue-text {
  color: skyblue;
}

.red-text {
  color: rgb(116, 193, 0);
}

.search-btn {
  margin-left: 10%;
  margin-top: 10%;
  width: 80%;
  position: absolute;
  bottom: 20%;
}

.img-icon {
  height: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex:1; */
}

.flex-item {
  flex: 1;
}


input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: border-color 0.3s;
  cursor: pointer;
}

/* 复选框标记的样式 */
input[type="checkbox"]:checked::before {
  content: "✔"; /* 选中后显示✔符号 */
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 50%; /* 使复选框变成圆形 */
  transition: border-color 0.3s;
  background-color: rgb(70, 175, 240); /* 选中后的背景色 */
  cursor: pointer;
}

input[type="checkbox"]:checked::after {
  display: none; /* 显示 ✔ 符号 */
}
</style>